<template>
  <div class="user-management">
    <div class="header">
      <h2>用户管理</h2>
      <div class="role-buttons">
        <el-button type="primary" size="small" :class="{ active: !isCustomerTable & !isPendTable}" @click="staff">员工</el-button>
        <el-button type="primary" size="small" :class="{ active: isCustomerTable & !isPendTable}" @click="Customer">客户</el-button>
        <el-button type="primary" size="small" :class="{ active: !isCustomerTable & isPendTable }" @click="pendStaff">审核员工</el-button>
        <el-button type="primary" size="small" :class="{ active: isCustomerTable & isPendTable }" @click="pendCustomer">审核客户</el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="Users" :row-class-name="tableRowClassName" style="width: 100%">
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="name" label="姓名" />
        
        <!--如果为客户表，显示公司、电话-->
        <el-table-column prop="company" label="公司" v-if="isCustomerTable" />
        <el-table-column prop="phone" label="电话" v-if="isCustomerTable" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'danger'" class="status-tag">
              {{ row.status === 'active' ? '正常' : '已冻结' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                :type="row.status === 'active' ? 'danger' : 'success'"
                size="small"
                class="status-button"
                @click="status(row.id, row.status)"
              >
                <el-icon class="button-icon">
                  <component :is="row.status === 'active' ? 'Lock' : 'Unlock'" />
                </el-icon>
                {{ row.status === 'active' ? '冻结' : '恢复' }}
              </el-button>
              <el-button 
                type="primary" 
                size="small"
                class="password-button"
                @click="password(row.id)"
              >
                <el-icon class="button-icon"><Key /></el-icon>
                修改密码
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getAllStaff, getPendStaff, getAllCustomers, getPendCustomers, changeStatus, changePassword } from '../../utils/admin/userManagement.js';
import { Lock, Unlock, Key } from '@element-plus/icons-vue';

const isCustomerTable = ref(false);
const isPendTable = ref(false);
const Users = ref([]);


// 切换到员工列表
const staff = async () => {
  isCustomerTable.value = false;
  isPendTable.value = false;
  try {
      const response = await getAllStaff();
      if (response.data.code === 200) {
        Users.value = response.data.data
      }
    } catch (error) {
      ElMessage.error('获取员工列表失败');
  }
};

// 切换到审核员工列表
const pendStaff = async () => {
  isCustomerTable.value = false;
  isPendTable.value = true;
  try {
      const response = await getPendStaff();
      if (response.data.code === 200) {
        Users.value = response.data.data
      }
    } catch (error) {
      ElMessage.error('获取员工列表失败');
  }
};


// 切换到客户列表
const Customer = async () => {
  isCustomerTable.value = true;
  isPendTable.value = false;
  try {
      const response = await getAllCustomers();
      if (response.data.code === 200) {
        Users.value = response.data.data
      }
    } catch (error) {
      ElMessage.error('获取客户列表失败');
  }
};

// 切换到审核客户列表
const pendCustomer = async () => {
  isCustomerTable.value = true;
  isPendTable.value = true;
  try {
      const response = await getPendCustomers();
      if (response.data.code === 200) {
        Users.value = response.data.data
      }
    } catch (error) {
      ElMessage.error('获取客户列表失败');
    }
}

// 更改状态
const status = async (id,status) => {
  try {
    const statusDto = {
      id: id,
      status: status === 'active'? 'frozen' : 'active',
    }
    const response = await changeStatus(statusDto);
  }catch (error) {
    ElMessage.error('更改状态失败');
  }finally{
    isCustomerTable.value ? await Customer() : await staff();
  }
};

// 修改密码
const password = async (id) => {
  try {
    const { value: newPassword, action } = await ElMessageBox.prompt('请输入新密码', '修改密码');
    if (action === 'confirm' && newPassword) {
      // 调用修改密码接口
      const passwordDto = { id: id, password: newPassword };
      await changePassword(passwordDto);
      ElMessage.success('密码修改成功');
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消操作，不显示错误提示
    } else {
      ElMessage.error('修改密码失败: ' + error.message);
    }
  }
};

onMounted(() => {
  staff();
});

// 行样式处理函数
const tableRowClassName = ({ row }) => {
  return row.status === 'frozen' ? 'row-inactive' : '';
}
</script>

<style scoped>
.user-management {
  padding: 24px;
  min-height: 100vh;
  background-color: #f5f7fa;
  margin-left: 20px;
  margin-top: 0;
}

.header {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  position: fixed;
  top: 0;
  left: 15%;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h2 {
  margin: 0;
  color: #1a237e;
  font-size: 24px;
  font-weight: 600;
}

.role-buttons {
  display: flex;
  gap: 12px;
}

.content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-top: 100px;
  
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  color: #1a237e;
  font-weight: 600;
  padding: 16px;
}

:deep(.el-table td) {
  color: #546e7a;
  padding: 16px;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #fafbfc;
}

:deep(.el-button) {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  background: linear-gradient(90deg, #3949ab 0%, #5c6bc0 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(57, 73, 171, 0.3);
}

:deep(.el-button--primary.active) {
  background: #1a237e;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.3);
}

:deep(.el-button--danger) {
  background: linear-gradient(90deg, #c62828 0%, #d32f2f 100%);
  border: none;
}

:deep(.el-button--danger:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
}

:deep(.el-message-box) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.el-message-box__header) {
  background: #f5f7fa;
  padding: 20px 24px;
  margin: 0;
  border-bottom: 1px solid #eef2f7;
}

:deep(.el-message-box__title) {
  color: #1a237e;
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-message-box__content) {
  padding: 24px;
}

:deep(.el-message-box__btns) {
  padding: 16px 24px;
  border-top: 1px solid #eef2f7;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #3949ab;
  box-shadow: 0 0 0 2px rgba(57, 73, 171, 0.1);
}

.row-inactive {
  background-color: #fafbfc;
  color: #9e9e9e;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.status-tag {
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.status-button {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.status-button:hover {
  transform: translateY(-2px);
}

.status-button.danger {
  background: linear-gradient(90deg, #c62828 0%, #d32f2f 100%);
  border: none;
}

.status-button.success {
  background: linear-gradient(90deg, #2e7d32 0%, #43a047 100%);
  border: none;
}

.button-icon {
  font-size: 14px;
  margin-right: 4px;
}

.password-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.row-inactive {
  background-color: #fafbfc;
  color: #9e9e9e;
  transition: all 0.3s ease;
}

.row-inactive .status-tag {
  opacity: 0.7;
}

.row-inactive .action-buttons .el-button {
  opacity: 0.8;
}

:deep(.el-table__row) {
  transition: all 0.3s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .user-management {
    padding: 16px;
    margin-left: 0;
  }

  .header {
    padding: 16px;
    margin-bottom: 16px;
    flex-direction: column;
    gap: 16px;
    top: 16px;
  }

  .role-buttons {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .content {
    padding: 16px;
  }

  :deep(.el-table th),
  :deep(.el-table td) {
    padding: 12px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .action-buttons .el-button {
    width: 100%;
  }
}
</style>